import React, {useState} from "react";
import {View, Input, Button, ScrollView, Text, Icon, Image} from "@tarojs/components";
import {AtTabs, AtTabsPane} from "taro-ui";
import "taro-ui/dist/style/components/tabs.scss";
import "./index.scss";

export default () => {
  const [current, setCurrent] = useState(0);
  const [searchValue, setSearchValue] = useState('');

  const handleTabClick = (value) => {
    setCurrent(value);
  };

  const handleSearchChange = (event) => {
    setSearchValue(event.target.value);
  };

  const handleSearch = () => {
    // 处理搜索逻辑
  };

  const mockScenicSpots = [
    {id: 1, name: '景点A', description: '这是景点A的描述', image: 'https://th.bing.com/th/id/OIP.griFUXuoWi5gpaD4MiQf9wHaEK?rs=1&pid=ImgDetMain', favorites: 10},
    {id: 2, name: '景点B', description: '这是景点B的描述', image: 'https://th.bing.com/th/id/OIP.griFUXuoWi5gpaD4MiQf9wHaEK?rs=1&pid=ImgDetMain', favorites: 20},
    {id: 3, name: '景点C', description: '这是景点C的描述', image: 'https://th.bing.com/th/id/OIP.griFUXuoWi5gpaD4MiQf9wHaEK?rs=1&pid=ImgDetMain', favorites: 30},
  ];

  return (
    <View className="scenic">
      <Input
        className="search-input"
        type="text"
        placeholder="搜索景点"
        value={searchValue}
        onInput={handleSearchChange}
      />
      <Button className="search-button" onClick={handleSearch}>搜索</Button>
      <AtTabs current={current} tabList={[{title: '推荐'}, {title: '最新'}, {title: '热门'}]} onClick={handleTabClick}>
        <AtTabsPane current={current} index={0}>
          <ScrollView className="scenic-list">
            {mockScenicSpots.map(spot => (
              <View key={spot.id} className="scenic-item">
                {/*  @ts-ignore*/}
                <Image className="scenic-image" src={spot.image} />
                <View className="scenic-info">
                  <Text className="scenic-name">{spot.name}</Text>
                  <Text className="scenic-description">{spot.description}</Text>
                  <View className="scenic-favorites">
                      {/*  @ts-ignore*/}
                    <Icon value="heart" size="20" color="#FF4949" />
                    <Text>{spot.favorites}</Text>
                  </View>
                </View>
              </View>
            ))}
          </ScrollView>
        </AtTabsPane>
        <AtTabsPane current={current} index={1}>
          <ScrollView className="scenic-list">
            {mockScenicSpots.map(spot => (
              <View key={spot.id} className="scenic-item">
                <Image className="scenic-image" src={spot.image} />
                <View className="scenic-info">
                  <Text className="scenic-name">{spot.name}</Text>
                  <Text className="scenic-description">{spot.description}</Text>
                  <View className="scenic-favorites">
                      {/*  @ts-ignore*/}
                    <Icon value="heart" size="20" color="#FF4949" />
                    <Text>{spot.favorites}</Text>
                  </View>
                </View>
              </View>
            ))}
          </ScrollView>
        </AtTabsPane>
        <AtTabsPane current={current} index={2}>
          <ScrollView className="scenic-list">
            {mockScenicSpots.map(spot => (
              <View key={spot.id} className="scenic-item">
                <Image className="scenic-image" src={spot.image} />
                <View className="scenic-info">
                  <Text className="scenic-name">{spot.name}</Text>
                  <Text className="scenic-description">{spot.description}</Text>
                  <View className="scenic-favorites">
                      {/*  @ts-ignore*/}
                    <Icon value="heart" size="20" color="#FF4949" />
                    <Text>{spot.favorites}</Text>
                  </View>
                </View>
              </View>
            ))}
          </ScrollView>
        </AtTabsPane>
      </AtTabs>
    </View>
  );
};
